<!--色块-->

<template>
  <div class="w-h-full" :style="{
    background: background,
    opacity: component.compConfigData.opacity
  }">
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import PnDesigner from "../../../../utils/PnDesigner";

  const _this = {
    name: 'ColorLumpComp', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '1.0',
      configDataTemp: {

        opacity: 1,       // 透明度
        shadeAngle: 180,  // 渐变色角度
        colors: [         // 色系，只有一个的时候为纯色
          '#2196f3'
        ]

      }
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //
        this.init()
      })
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.runCustomGlobalJsCode()
        }, (result) => {
          this.runCustomGlobalJsCode()
        });
      }
    },
    computed: {
      background () {
        let colors = this.component.compConfigData.colors;
        let colorStyle = '';
        for (let i=0; i<colors.length; i++) {
          if (i < colors.length-1) {
            colorStyle += colors[i] + ','
          }else {
            colorStyle += colors[i] + ''
          }
        }
        if (colors.length == 1) {
          return colors[0]
        }else {
          return 'linear-gradient('+this.component.compConfigData.shadeAngle+'deg, '+colorStyle+')'
        }
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
